<template>
  <div>
    <el-dialog
      v-model="state.dialogVisible"
      title="选择参会人员"
      width="50%"
      @open="openDialog"
      @close="handleClose"
      class="dialogStyle"
    >
      <tableIndex
        :tableData="state.tableData"
        :isIndex="false"
        :height="500"
        :isSelection="true"
        :isPaging="false"
        :isRadio="false"
        ref="tableindex"
        :fields="state.fields"
        @selectChange="selectChange"
        :tableHead="state.tableHead"
        @searchList="searchList"
      >
        <template #btns>
          <div style="float: right">
            <el-button size="small" plain class="button_edit" @click="checkAll"
              ><svg-icon icon-class="export" />全选</el-button
            >
          </div>
        </template>
      </tableIndex>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose" class="button_cancel2">取消</el-button>
          <el-button @click="submitHandler" class="button_view"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import tableIndex from '@/components/table/index.vue'
import { department } from '@/api/project'
import {ElMessage} from 'element-plus'

const state = reactive({
  id: '',
  falg: false,
  checkoutList: [],
  departmentId: '',
  tableHead: [
    {
      prop: 'userName',
      label: '人员名称'
    }
  ],
  dialogVisible: false,
  tableData: [],
  fields: [
    {
      key: 'userName',
      label: '人员名称',
      type: 'input',
      placeholder: '人员名称关键字搜索'
    }
  ]
})
const emits = defineEmits(['submitRow'])
const projectProposal = (row) => {
  emits('submitRow', row)
  state.dialogVisible = false
}
const selectChange = (val) => {
  console.log(val)
  state.checkoutList = val
}
const submitHandler = () => {
  if(state.checkoutList.length==0){
     ElMessage.error('请选择人员')
     return
  }
  emits('submitRow', { list: state.checkoutList, id: state.id })
  state.dialogVisible = false
}
const openDialog = () => {
  getAllpeople()
}
const handleClose = () => {
  state.falg = false
  state.dialogVisible = false
}
//获取对应部门人员
const getAllpeople = (id = '') => {
  // id
  department
    .getUserByDepartmentId(state.departmentId, state.userName)
    .then((res) => {
      if (res.code == '200') {
        state.tableData = res.data
      }
    })
}
const searchList = (obj) => {
  state.userName = obj.userName
  getAllpeople()
}
const tableindex = ref(null)
//表格全部选中
const checkAll = () => {
  state.falg = !state.falg
  tableindex.value.checkAll(state.falg)
}

defineExpose({
  state
})
</script>
<style lang="scss" scoped>
@import '@/views/constructionProjectManage/static/dialog.scss';
</style>
